<template>
    <div>
        <h2>产品月销</h2>
        <div ref="chart" class="chart"></div>
    </div>
</template>

<script setup>
import { ref, inject, onMounted } from 'vue'
import { useDebouncedResize } from '@/utils/hooks/useDebouncedResize'
import { useEChart } from '@/utils/hooks/useEchart'

const echarts = inject('echarts')
const axios = inject('axios')
const chart = ref(null)
const lineData = ref(null)

// 使用抽离的echarts Hook
const { initChart, disposeChart, getInstance, resizeChart } = useEChart()

const getLineData = async () => {
    const res = await axios.get('/two/data')
    lineData.value = res.data.data.chartData
}

onMounted(async () => {
    await getLineData()
    const option = {
        xAxis: {
            type: 'category',
            boundaryGap: false, //折线图与y轴距离false 没有距离
            // 设置坐标轴轴线颜色
            axisLine: {
                lineStyle: {
                    color: '#fff',
                },
            },
            axisLabel: {
                color: '#fff', // 标签文字颜色
            },
            data: lineData.value.day,
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff',
                },
            },
            axisLabel: {
                color: '#fff', // 标签文字颜色
            },
        },
        legend: {
            data: ['服饰', '数码', '家电', '家居', '日化'],
            top: 'top',
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
            },
            borderRadius: 10,
        },
        grid: {
            left: '1%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        series: [
            // 设置服饰的折线图
            {
                name: '服饰',
                type: 'line',
                data: lineData.value.num.Chemicals,
                stack: 'Total', //数据堆叠
                smooth: true, //折线图平滑效果 变成曲线图
                showSymbol: false, //   隐藏所有数据点
                areaStyle: {
                    opacity: 0.8,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(128,255,165)' },
                            { offset: 1, color: 'rgba(1,191,236)' },
                        ],
                    },
                },
                lineStyle: {
                    // 设置线段样式
                    width: 0,
                },
                emphasis: {
                    //设置高亮的图形样式和标签样式
                    focus: 'series', //只显示选中的内容高亮
                },
            },
            {
                name: '数码',
                type: 'line',
                data: lineData.value.num.Clothes,
                stack: 'Total', //数据堆叠
                smooth: true,
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(0, 221, 255)' },
                            { offset: 1, color: 'rgba(77, 119, 255)' },
                        ],
                    },
                },
                lineStyle: {
                    // 设置线段样式
                    width: 0,
                },
                emphasis: {
                    //设置高亮的图形样式和标签样式
                    focus: 'series', //只显示选中的内容高亮
                },
            },
            {
                name: '家电',
                type: 'line',
                data: lineData.value.num.Electrical,
                stack: 'Total', //数据堆叠
                smooth: true,
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(55, 162, 255)' },
                            { offset: 1, color: 'rgba(116, 21, 219)' },
                        ],
                    },
                },
                lineStyle: {
                    // 设置线段样式
                    width: 0,
                },
                emphasis: {
                    //设置高亮的图形样式和标签样式
                    focus: 'series', //只显示选中的内容高亮
                },
            },
            {
                name: '家居',
                type: 'line',
                data: lineData.value.num.digit,
                stack: 'Total', //数据堆叠
                smooth: true,
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(255, 0, 135)' },
                            { offset: 1, color: 'rgba(135, 0, 157)' },
                        ],
                    },
                },
                lineStyle: {
                    // 设置线段样式
                    width: 0,
                },
                emphasis: {
                    //设置高亮的图形样式和标签样式
                    focus: 'series', //只显示选中的内容高亮
                },
            },
            {
                name: '日化',
                type: 'line',
                data: lineData.value.num.gear,
                stack: 'Total', //数据堆叠
                smooth: true,
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(255, 191, 0)' },
                            { offset: 1, color: 'rgba(224, 62, 76)' },
                        ],
                    },
                },
                lineStyle: {
                    // 设置线段样式
                    width: 0,
                },
                emphasis: {
                    //设置高亮的图形样式和标签样式
                    focus: 'series', //只显示选中的内容高亮
                },
            },
        ],
    }
    initChart(echarts, chart, option)
})
// 使用抽离的防抖resize Hook
useDebouncedResize(resizeChart, 500)
</script>

<style lang="less" scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;
}
.chart {
    /* 高度360 */
    height: 4.5rem;
}
</style>
